﻿@using Store.Models.Database
<!-- InstanceBeginEditable name="MainBody" -->
<link rel="stylesheet" type="text/css" href="/css/household.css" />
<link rel="stylesheet" type="text/css" href="/css/goods-item.css" />
<div class="phone-market">
    <div class="banner">
        <div class="xgs-row">
            <img src="/img/household/banner.png" width="100%" height="300" />
        </div>
    </div>
</div>
<!--  -->
<div class="household-container  goods-item">
    <div class="xgs-row" style="padding: 0;background-color: white;">
        <ul class="household-navtab" style="display: inline-block;">
            @* 3、渲染数据 *@
            @* 转换类型 *@
            @* @ViewData["Cates"] 1、直接使用变量 *@
            @* cs+html c# @{} 2、实现多行代码编写 *@

            @{
                //转换类型
                var cates = ViewData["Cates"] as List<Category>;
                foreach (var item in cates)
                {
                    @* @item.CateName  分类对象.分类名字  *@
                    @*if是判断点击item.id时，该控件会变色*@
                    if ((int)ViewData["CateId"] == item.Id)
                    {
                        <li><a style="background-color: #69c0ff;color: white;" href="/market.html?cateId=@item.Id">@item.CateName</a></li>
                    }
                    else
                    {
                        <li><a href="/market.html?cateId=@item.Id">@item.CateName</a></li>
                    }
                }
            }
            @*<li><a style="background-color: #69c0ff;color: white;" href="javascript:void(0);">文学</a></li>
                <li><a href="javascript:void(0);">社科</a></li>
                <li><a href="javascript:void(0);">经管</a></li>
                <li><a href="javascript:void(0);">少儿</a></li>
                <li><a href="javascript:void(0);">文教</a></li>
                <li><a href="javascript:void(0);">科技</a></li>
                <li><a href="javascript:void(0);">艺术</a></li>*@
        </ul>
    </div>

    <div class="tab-item white-panel" style="padding: 20px 0;margin-top: 20px;">
        <!-- 文学 -->
        <div id="wenxue" class="wenxue">
            @{
                var goods = ViewData["Goods"] as List<Good>;
                //计算共多少行
                var row = goods.Count / 4 + 1;
                for (int i = 1; i <= row; i++)
                {
                    <div class="xgs-row">
                        @{
                            //分页输出
                            //1 2 3 4
                            //5 6 7 8
                            //9 10 11 12
                            var list = goods.Skip((i - 1) * 4).Take(4).ToList();
                            foreach (var item in list)
                            {
                                <div class="xgs-col4">
                                    <a href="detail.html?id=@item.Id">
                                        <div>
                                            <img src="@item.Cover" alt="" />
                                            <span class="goods-title">
                                                @item.Name
                                            </span>
                                            <p class="price">￥@item.Price</p>
                                        </div>
                                    </a>
                                </div>
                            }
                        }
                    </div>
                }
            }
        </div>

        <!-- 文学 -->
        @*<div class="xgs-row">
                <div class="xgs-col4">
                    <a href="detail.html">
                        <div>
                            <img src="/img/phone-market/xiaomi11.jpg" alt="" />
                            <span class="goods-title">小米11青春版 骁龙780G处理器AMOLED柔性直屏5G手机 清甜荔枝 8GB+128GB</span>
                            <p class="price">￥1999.00</p>
                        </div>
                    </a>
                </div>
                <div class="xgs-col4">
                    <a href="detail.html">
                        <div>
                            <img src="/img/phone-market/xiaomimix4.jpg" alt="" />
                            <span class="goods-title">
                                小米 MIX4 骁龙888+ 一体化陶瓷机身 全面屏 一亿像素三摄 哈曼卡顿双扬声器 8GB+128GB
                                陶瓷黑
                                5G旗舰手机
                            </span>
                            <p class="price">￥5799.00</p>
                        </div>
                    </a>
                </div>
                <div class="xgs-col4">
                    <a href="detail.html">
                        <div>
                            <img src="/img/phone-market/xiaomi11-ultra.jpg" alt="" />
                            <span class="goods-title">
                                小米11 Ultra 至尊 5G 骁龙888 2K AMOLED四曲面柔性屏 陶瓷工艺 12GB+256GB
                                白色
                                游戏手机
                            </span>
                            <p class="price">￥5999.00</p>
                        </div>
                    </a>
                </div>
                <div class="xgs-col4">
                    <a href="detail.html">
                        <div>
                            <img src="/img/phone-market/xiaomi10s.jpg" alt="" />
                            <span class="goods-title">
                                小米10S 5G新品手机【现货速发】 全网通 8G+128G 蓝色
                                官方标配【原装33W充电套装+晒单20红包】
                            </span>
                            <p class="price">￥2699.00</p>
                        </div>
                    </a>
                </div>
            </div>*@
    </div>
    <!-- /文学 -->
</div>
<!-- InstanceEndEditable -->